<template>
  <input class="input" :class="{ error: !isOk }"
  :type="type" :placeholder='placeholder' @input="dataChange" @blur="showTips">
</template>

<script>
export default {
props:['type', 'placeholder','rule','err_massage'],
data(){
    return{
        isOk:true
    }
},
methods:{
    // 失去焦点判断isOk的值是不是false，如果是false就需要弹窗
     showTips() {
       
        if (!this.isOk) {
            // console.log('这是弹窗的isok',this.isOk);
            
            
            this.$toast.fail(this.err_massage);
        }
    },
    dataChange($event){
      console.log('数据有变化');
      // 这里我们检测到数据有变化,需要调用正则表达式确认数据的合法性
        // 如果数据为空 正则表达式就为true
        if(!$event.target.value){
            this.isOk=true
        }else{
            // 创建正则表达式
            var regex=new RegExp(this.rule);
            //2.测试数据的合法性
            // 在点击的时候我们可以获取得到当前的点击事件 $event
            // 当前的 dom 就是里面的 target
            // 所以我们的数据应该是 $event.target.value
            // 我们的数据是 $event.target.value
            // 3把结果存起来
            this.isOk=regex.test($event.target.value)
        }
        if(!this.isOk){
          console.log(this.err_massage);
          
        }
       this.$emit('input',$event.target.value)
    }
}
}
</script>

<style>
.input{
    margin-bottom: 5.556vw;
    padding: 5.556vw;
    width: 100%;
    box-sizing: border-box;
    height: 10.556vw;
    background: #fff;
    border: none;
    border-bottom: 1px #666 solid;
    outline: none;

}
.error{
    border-color: red;
}
</style>